<template>
  <view class="pagination-container" >
    <!-- 简洁模式：只显示上一页/下一页 v-if="totalPages > 1"-->
    <view v-if="mode === 'simple'" class="pagination-simple">
      <up-button
        :disabled="currentPage <= 1"
        @click="handlePrevPage"
        type="default"
        size="small"
        class="pagination-btn"
      >
        <up-icon name="arrow-left" size="14"></up-icon>
        上一页
      </up-button>
      
      <view class="page-info">
        {{ currentPage }} / {{ totalPages }}
      </view>
      
      <up-button
        :disabled="currentPage >= totalPages"
        @click="handleNextPage"
        type="default"
        size="small"
        class="pagination-btn"
      >
        下一页
        <up-icon name="arrow-right" size="14"></up-icon>
      </up-button>
    </view>
    
    <!-- 完整模式：显示页码 -->
    <view v-else class="pagination-full">
      <!-- 上一页 -->
      <up-button
        :disabled="currentPage <= 1"
        @click="handlePrevPage"
        type="default"
        size="small"
        class="pagination-btn"
      >
        <up-icon name="arrow-left" size="14"></up-icon>
      </up-button>
      
      <!-- 页码列表 -->
      <view class="page-numbers">
        <!-- 第一页 -->
        <view
          v-if="showFirstPage"
          class="page-number"
          :class="{ active: currentPage === 1 }"
          @click="handlePageChange(1)"
        >
          1
        </view>
        
        <!-- 省略号 -->
        <view v-if="showStartEllipsis" class="ellipsis">...</view>
        
        <!-- 中间页码 -->
        <view
          v-for="page in visiblePages"
          :key="page"
          class="page-number"
          :class="{ active: currentPage === page }"
          @click="handlePageChange(page)"
        >
          {{ page }}
        </view>
        
        <!-- 省略号 -->
        <view v-if="showEndEllipsis" class="ellipsis">...</view>
        
        <!-- 最后一页 -->
        <view
          v-if="showLastPage"
          class="page-number"
          :class="{ active: currentPage === totalPages }"
          @click="handlePageChange(totalPages)"
        >
          {{ totalPages }}
        </view>
      </view>
      
      <!-- 下一页 -->
      <up-button
        :disabled="currentPage >= totalPages"
        @click="handleNextPage"
        type="default"
        size="small"
        class="pagination-btn"
      >
        <up-icon name="arrow-right" size="14"></up-icon>
      </up-button>
    </view>
    
    <!-- 跳转输入框（可选） -->
    <view v-if="showJumper" class="pagination-jumper">
      <text class="jumper-text">跳至</text>
      <input
        v-model="jumpPage"
        type="number"
        class="jumper-input"
        @confirm="handleJump"
        placeholder="页码"
      />
      <text class="jumper-text">页</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'Pagination',
  props: {
    // 当前页码
    current: {
      type: Number,
      default: 1
    },
    // 总页数
    total: {
      type: Number,
      required: true
    },
    // 显示模式：simple(简洁) | full(完整)
    mode: {
      type: String,
      default: 'simple',
      validator: (value) => ['simple', 'full'].includes(value)
    },
    // 是否显示跳转输入框
    showJumper: {
      type: Boolean,
      default: false
    },
    // 显示的页码数量（完整模式下）
    pageSize: {
      type: Number,
      default: 5
    }
  },
  data() {
    return {
      currentPage: this.current,
      jumpPage: ''
    }
  },
  computed: {
    totalPages() {
      return this.total
    },
    // 可见的页码列表
    visiblePages() {
      if (this.mode === 'simple') return []
      
      const pages = []
      const total = this.totalPages
      const current = this.currentPage
      const size = this.pageSize
      
      if (total <= size + 2) {
        // 总页数较少，显示所有页码
        for (let i = 1; i <= total; i++) {
          pages.push(i)
        }
      } else {
        // 计算显示范围
        let start = Math.max(2, current - Math.floor(size / 2))
        let end = Math.min(total - 1, start + size - 1)
        
        if (end - start < size - 1) {
          start = Math.max(2, end - size + 1)
        }
        
        for (let i = start; i <= end; i++) {
          pages.push(i)
        }
      }
      
      return pages
    },
    // 是否显示第一页
    showFirstPage() {
      return this.mode === 'full' && this.totalPages > 1 && !this.visiblePages.includes(1)
    },
    // 是否显示最后一页
    showLastPage() {
      return this.mode === 'full' && this.totalPages > 1 && !this.visiblePages.includes(this.totalPages)
    },
    // 是否显示开始省略号
    showStartEllipsis() {
      return this.mode === 'full' && this.visiblePages.length > 0 && this.visiblePages[0] > 2
    },
    // 是否显示结束省略号
    showEndEllipsis() {
      return this.mode === 'full' && this.visiblePages.length > 0 && this.visiblePages[this.visiblePages.length - 1] < this.totalPages - 1
    }
  },
  watch: {
    current(newVal) {
      this.currentPage = newVal
    }
  },
  methods: {
    // 上一页
    handlePrevPage() {
      if (this.currentPage > 1) {
        this.handlePageChange(this.currentPage - 1)
      }
    },
    // 下一页
    handleNextPage() {
      if (this.currentPage < this.totalPages) {
        this.handlePageChange(this.currentPage + 1)
      }
    },
    // 页码变化
    handlePageChange(page) {
      if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
        this.currentPage = page
        this.$emit('change', page)
      }
    },
    // 跳转到指定页
    handleJump() {
      const page = parseInt(this.jumpPage)
      if (page && page >= 1 && page <= this.totalPages) {
        this.handlePageChange(page)
        this.jumpPage = ''
      } else {
        uni.showToast({
          title: '请输入有效页码',
          icon: 'none'
        })
      }
    }
  }
}
</script>

<style scoped>
.pagination-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20rpx;
  padding: 20rpx;
}

/* 简洁模式 */
.pagination-simple {
  display: flex;
  align-items: center;
  gap: 20rpx;
}

.page-info {
  font-size: 26rpx;
  color: #666;
  padding: 0 20rpx;
  min-width: 100rpx;
  text-align: center;
}

/* 完整模式 */
.pagination-full {
  display: flex;
  align-items: center;
  gap: 12rpx;
}

.pagination-btn {
  min-width: 80rpx;
  height: 60rpx;
  border-radius: 8rpx;
}

/* 页码列表 */
.page-numbers {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.page-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  font-size: 26rpx;
  color: #333;
  background: #f5f5f5;
  border-radius: 8rpx;
  cursor: pointer;
  transition: all 0.3s ease;
}

.page-number:hover {
  background: #e6f7ff;
  color: #1890ff;
}

.page-number.active {
  background: #1890ff;
  color: #fff;
}

.ellipsis {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 60rpx;
  font-size: 26rpx;
  color: #999;
}

/* 跳转输入框 */
.pagination-jumper {
  display: flex;
  align-items: center;
  gap: 12rpx;
  margin-top: 10rpx;
}

.jumper-text {
  font-size: 26rpx;
  color: #666;
}

.jumper-input {
  width: 100rpx;
  height: 60rpx;
  padding: 0 12rpx;
  font-size: 26rpx;
  text-align: center;
  border: 1rpx solid #d9d9d9;
  border-radius: 6rpx;
  background: #fff;
}

.jumper-input:focus {
  border-color: #1890ff;
  outline: none;
}

/* 响应式适配 */
@media (max-width: 750rpx) {
  .pagination-full {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .page-numbers {
    order: -1;
    margin-bottom: 10rpx;
  }
}
</style>